<template>
<div class="header">
    <div class="header-left">
        <span class="iconfont icon-back">&#xe624;</span>
    </div>
    <div class="header-input">
         <span class="iconfont searchIcon">&#xe632;</span>输入城市/景点/游玩主题
    </div>
    <router-link to="/city" tag="div">
        <div class="header-right">
            {{this.currentCity}} 
            <span class="iconfont arrawIcon">&#xe64a;</span>
        </div>
    </router-link>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "HomeHeader",
  props:{
      city: String
  },
  computed: {
     ...mapState({
          currentCity: "city"
      })
  }
};
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.header {
    display: flex;
    height: $headerH;
    line-height: $headerH;
    background-color: $bgColor;
    color: #fff;

    .header-left {
        width: 0.64rem;
    }

    .header-right {
       min-width: 1.24rem;
       padding: 0 .1rem;
        text-align: center;
        font-size .28rem
    }

    .arrawIcon {
        font-size: 0.28rem;
        margin-top: 0.1rem;
        margin-left: -0.04rem;
    }

    .header-input {
        flex: 1;
        height: 0.62rem;
        line-height: 0.62rem;
        background-color: #ffffff;
        margin-top: 0.12rem;
        margin-left: 0.2rem;
        border-radius: 0.1rem;
        color: #ccc;
        text-align: left;
        padding-left: 0.2rem;
        font-size: 0.28rem;
    }

    .searchIcon {
        margin-right: 0.05rem;
    }
    .icon-back{
        font-size .4rem
    }
}
</style>
">

</style>

